<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    title="添加"
    @open="open"
    @closed="handleClosed"
  >
    <el-form ref="form" :model="info">
      <el-alert type="warning">
        如需批量添加请使用换行，每行一个域名
      </el-alert>
      <el-form-item>
        <el-input v-model="info.text" type="textarea" :autosize="{minRows: 5}" />
      </el-form-item>
    </el-form>
    <span
      slot="footer"
      class="dialog-footer"
    >
        <el-button
          type="primary"
          @click="handleConfirm"
        >{{ $t('table.confirm') }}</el-button>
      </span>
  </el-dialog>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import { getAction, postAction, getUrlAction, postUrlAction } from '@/api/common'

@Component
export default class extends Vue {
@Prop({ required: true }) private show!:boolean

  private info = { text: '' }
  private dialogVisible = false

  @Watch('show')
  handleShowChange(val: boolean) {
    this.dialogVisible = val
  }

  private open() {
    this.$nextTick(() => {
      this.info = { text: '' }
    })
  }

  async handleConfirm() {
    const arr = this.info.text.split('\n').filter(m => m)
    this.dialogVisible = false
    this.$emit('submit', arr)
  }

  handleClosed() {
    this.$emit('update:show', false)
  }
}
</script>

<style scoped>

</style>
